<template>
  <el-drawer v-model="drawer" class="drawer-layout" size="400px" :title="title" direction="rtl"
    :before-close="handleClose" :close-on-click-modal="false">
    <div class="info-container">
      <div class="info-container_body">
        <div class="form-section">
          <el-form ref="refFrom" label-position="top" :model="form.model">
            <AgelFormGrid :items="form.items" :span="24" :gutter="16">
              <template #slot-scheme>
                <div class="dl-flex">
                  <el-input type="number" v-model="form.model.price"><template #append>元</template></el-input>
                  <el-input type="number" class="mg-l-12" v-model="form.model.quantity">
                    <template #append>{{ form.model.priceType == '2' ? 'L' : '分钟' }}</template>
                  </el-input>
                </div>

              </template>
              <template #slot-vendor>
                <span v-if="form.model.scope=='3'">
                  <span style=" color: var(--el-color-danger);margin-right: 4px;">*</span>适用对象</span>
                <vendor-select multiple v-model="form.model.vendors" v-if="form.model.scope=='3'"></vendor-select>
              </template>
            </AgelFormGrid>
          </el-form>
        </div>
      </div>
      <div class="info-container_footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </div>

  </el-drawer>
</template>

<script setup lang="ts">
import { addPrice, updatePrice } from '@/api/operation/price/index';
import { BizPriceVo, defaultModel } from '@/api/operation/price/types';
import VendorSelect from '@/views/common/vendor-select/index.vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { price_type, price_scope } = toRefs<any>(proxy?.useDict('price_type', 'price_scope'));
import { centToYuan, yuanToCent, secToMinu, minuToSec } from '@/utils/index'


const drawer = ref(false)
const title = ref('新增定价')
const isEdit = ref(false)
const form = reactive<any>({
  model: defaultModel(),
  items: [
    { prop: "name", label: "定价名称", required: true, attrs: { showWordLimit: true, maxlength: 20 } },
    {
      prop: "priceType", label: "配置类型", slot: 'agel-select', required: true,
      attrs: {
        options: price_type
      }
    },
    { prop: "quantity", label: "定价方案", slot: 'slot-scheme', required: true, },
    {
      prop: "scope", label: "类型", slot: 'agel-select', required: true,
      attrs: {
        options: price_scope
      }
    },
    
    
    { prop: "vendors", label: "", slot: 'slot-vendor',},
    { prop: "remarks", label: "备注", attrs: { type: 'textarea', showWordLimit: true, maxlength: 100 } },
  ],
})
const loading = ref(false)
const refFrom = ref<ElFormInstance>()
const emits = defineEmits(['close', 'success'])


const open = () => {
  title.value = '新增定价'
  isEdit.value = false
  drawer.value = true
  refFrom.value?.clearValidate()
}
const openEdit = (row: any) => {
  title.value = '编辑定价'
  isEdit.value = true
  form.model = {
    ...row,
    vendors: row.vendors?.map(it => it.vendorId),
    quantity: row.priceType == '2' ? row.quantity : secToMinu(row.quantity),
    price: centToYuan(row.price)
  }
  drawer.value = true
  refFrom.value?.clearValidate()
}
/** 取消 */
const handleClose = () => {
  form.model = defaultModel()
  refFrom.value?.clearValidate()
  drawer.value = false
  emits('close')
}
/** 确认 */
const handleSubmit = async () => {
  if (!refFrom.value) return
  refFrom.value.validate((valid, fields) => {
    if (valid) {
      handleRequest()
    } else {
      console.log('error submit!', fields)
    }
  })
}
const handleRequest = async () => {
  loading.value = true
  let serviceMethod = isEdit.value ? updatePrice : addPrice
  let data = {
    ...form.model,
    vendors: form.model.vendors?.map(id => ({ vendorId: id })),
    quantity: form.model.priceType == '2' ? form.model.quantity : minuToSec(form.model.quantity),
    price: yuanToCent(form.model.price)
  }
  let res = await serviceMethod(data)
  loading.value = false
  if (res.code == 200) {
    proxy?.$modal.msgSuccess('操作成功！')
    emits('success')
    drawer.value = false
  } else {
    proxy?.$modal.msgError(res.msg || '操作失败！')
  }
}
defineExpose({ open, openEdit })
</script>
